<template>
  <div>
    <el-dialog
      ref="refDlg"
      title="搭配产品"
      :visible.sync="dialogShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="clearForm"
      width="700px"
      @close="closeDialog"
    >
      <table-box
        ref="refTable"
        v-loading="dataLoading"
        table-size="mini"
        :table-config="tableConfig"
        show-index
        no-request
        :table-height="300"
        :show-custom-setting="false"
        :other-filters="otherFilter"
      />

      <div slot="footer">
        <el-button size="mini" @click="closeDialog">关闭</el-button>
      </div>
      <el-image-viewer
        v-if="imgDialogVisible"
        style="z-index: 3000;"
        :on-close="handleCloseImg"
        :url-list="previewImgs"
      />
    </el-dialog>
  </div>

</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
// import { queryDetailData, queryMatchData, queryNormalMatch } from '@/api/display/recommend'
export default {
  name: 'EditForm',
  components: { ElImageViewer },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    activeData: {
      type: Object,
      default: () => { return {} }
    },
    shopData: {
      type: Object,
      default: () => { return {} }
    },
    params: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    const that = this
    return {
      dataLoading: false,
      tableList: [], // 搭配产品数据
      imgDialogVisible: false,
      previewImgs: [],
      otherFilter: [],
      submiting: false,
      tableConfig: {
        interfacePath: ``,
        buttonGroupCode: 'default',
        hideSearchBar: true,
        tabIndex: 4,
        pageSize: 10,
        // 图片、名称、型号、上市时间、品类、系列
        setting: [
          {
            prop: '',
            label: '产品主图',
            minWidth: '80',
            render: (h, data, row) => {
              const DomArr = [
                <div style='display:flex'>
                  <img
                    onClick={that.handlePreview.bind(this, data)}
                    src={'https://gcenterimg.quanyou.com.cn/' + data.mainPic}
                    height='50'
                    width='50'
                  >
                  </img>
                </div>
              ]
              return DomArr
            }
          },
          {
            prop: 'remoteProductName',
            label: '产品名称',
            minWidth: '160'
          },
          {
            prop: 'model',
            label: '型号',
            minWidth: '90'
          },
          {
            prop: 'marketTime',
            label: '上市时间',
            minWidth: '120'
          },
          {
            prop: 'category',
            label: '品类',
            minWidth: '120'
          },
          {
            prop: 'series',
            label: '系列',
            minWidth: '120'
          }
        ]
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async created() {
    this.otherFilter = [
      { 'id': ' customerCode', 'property': 'customerCode', 'operator': '=', 'value': this.shopData.customerCode },
      { 'id': ' productCode', 'property': 'productCode', 'operator': '=', 'value': this.activeData.productCode },
      { 'id': ' model', 'property': 'model', 'operator': '=', 'value': this.activeData.modelNumber },
      { 'id': ' productLocation', 'property': 'productLocation', 'operator': '=', 'value': this.activeData.productLocation }
    ]
    this.tableConfig.interfacePath = `${process.env.VUE_APP_BASE_API}/api/v1/displayProductCollocation/productMatching`
    this.$nextTick(() => {
      this.$refs.refTable.initTableData()
    })
  },

  methods: {
    // 关闭图片预览
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    handlePreview(data) {
      this.previewImgs = ['https://gcenterimg.quanyou.com.cn/' + data.mainPic || data.pic]
      this.imgDialogVisible = true
    },

    closeDialog() {
      this.dataLoading = false
      this.dialogShow = false
      this.clearForm()
    },
    clearForm(done) {
      done && done()
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
